import React, { useMemo, useEffect, useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import request from "@src/services/request";
import {getMyInvitedChart} from "@src/services/user";

const PieDonut2 = () => {
    const [invitedListChart, setInvitedListChart] = useState([]);

    useEffect(() => {
        getMyInvitedChart().then(r => setInvitedListChart(r));
    }, []); // Fetch data on component mount

    const options = {
        chart: {
            type: 'pie',
            style: {
                fontSize: '1em'
            },
        },
        tooltip: {
            valueSuffix: '%'
        },
        title: {
            text: null
        },
        plotOptions: {
            series: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: [{
                    enabled: true,
                    distance: 20
                }, {
                    enabled: true,
                    distance: -40,
                    format: '{point.percentage:.1f}%',
                    style: {
                        fontSize: '1.2em',
                        textOutline: 'none',
                        opacity: 0.7
                    },
                    filter: {
                        operator: '>',
                        property: 'percentage',
                        value: 10
                    }
                }]
            }
        },
        series: [
            {
                name: 'Percentage',
                colorByPoint: true,
                data: invitedListChart // Use state data directly
            }
        ],
        credits: {
            enabled: false
        }
    };

    const ChartsMemo = useMemo(() => {
        return (
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
                containerProps={{
                    style: {
                        width: '100%',
                        height: '320px'
                    }
                }}
            />
        );
    }, [options]); // Include options as dependency

    return (
        <>
            {ChartsMemo}
        </>
    );
};

export default PieDonut2;
